<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <span>重要的标签</span>
      <li>
        <a href="https://www.baidu.com">a标签</a>
        <ol>
          <li>a标签用来表示一个超链接</li>
          <li>
            <dl>
              <dt>href属性</dt>
              <dd>用来指示跳转到什么地方</dd>
            </dl>
          </li>
          <li>
            <dl>
              <dt>target属性</dt>
              <dd>指定跳转的行为（怎么跳）</dd>
            </dl>
          </li>
          <li>
            示例:
            <ul>
              <li>
                <a href="./1-helloworld.html" target="_blank"
                  >相对路径_在新的浏览器标签栏中打开</a
                ><br />
                <a href="./1-helloworld.html">相对路径</a>
              </li>
              <li>
                <a href="#">跳转到文档开始</a>
              </li>
              <li>
                <a href="#p4">调到指定的元素</a>
              </li>
              <li>
                <a href="javascript:;">占位，不跳转， 为了之后的填充</a>
              </li>
            </ul>
          </li>
        </ol>
      </li>
      <li>
        <span>img标签</span>
        <ol>
          <li>用来展示图片</li>
          <li>自结束标签</li>
          <li>src属性</li>
          <li>
            示例
            <ul>
              <li>
                <img src="./img/1.jpg" width="200px" />
              </li>
              <li>
                <img src="./img/2.jpg" alt="一群小花" width="200px" />
              </li>
            </ul>
          </li>
        </ol>
      </li>
    </ul>
    <ul>
      <span>其他的示例</span>
      <li>
        <span>iframe标签</span>
        <div>
          <!-- <iframe src="https://www.baidu.com" frameborder="1" width="200px"></iframe> -->
        </div>
      </li>
      <li>
        <span>audio</span>
        <div>
          <audio controls autoplay src="./resource/test.mp3">
            这是一个音频
          </audio>
        </div>
      </li>
    </ul>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
      perferendis modi, aut quaerat animi, a exercitationem vitae eius maiores
      dignissimos nemo voluptas dolore soluta vel, dicta eaque nobis veritatis
      praesentium!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
      perferendis modi, aut quaerat animi, a exercitationem vitae eius maiores
      dignissimos nemo voluptas dolore soluta vel, dicta eaque nobis veritatis
      praesentium!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
      perferendis modi, aut quaerat animi, a exercitationem vitae eius maiores
      dignissimos nemo voluptas dolore soluta vel, dicta eaque nobis veritatis
      praesentium!
    </p>
    <p id="p4" style="background-color: aquamarine">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
      perferendis modi, aut quaerat animi, a exercitationem vitae eius maiores
      dignissimos nemo voluptas dolore soluta vel, dicta eaque nobis veritatis
      praesentium!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
      perferendis modi, aut quaerat animi, a exercitationem vitae eius maiores
      dignissimos nemo voluptas dolore soluta vel, dicta eaque nobis veritatis
      praesentium!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
      perferendis modi, aut quaerat animi, a exercitationem vitae eius maiores
      dignissimos nemo voluptas dolore soluta vel, dicta eaque nobis veritatis
      praesentium!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
      perferendis modi, aut quaerat animi, a exercitationem vitae eius maiores
      dignissimos nemo voluptas dolore soluta vel, dicta eaque nobis veritatis
      praesentium!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
      perferendis modi, aut quaerat animi, a exercitationem vitae eius maiores
      dignissimos nemo voluptas dolore soluta vel, dicta eaque nobis veritatis
      praesentium!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
      perferendis modi, aut quaerat animi, a exercitationem vitae eius maiores
      dignissimos nemo voluptas dolore soluta vel, dicta eaque nobis veritatis
      praesentium!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
      perferendis modi, aut quaerat animi, a exercitationem vitae eius maiores
      dignissimos nemo voluptas dolore soluta vel, dicta eaque nobis veritatis
      praesentium!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
      perferendis modi, aut quaerat animi, a exercitationem vitae eius maiores
      dignissimos nemo voluptas dolore soluta vel, dicta eaque nobis veritatis
      praesentium!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
      perferendis modi, aut quaerat animi, a exercitationem vitae eius maiores
      dignissimos nemo voluptas dolore soluta vel, dicta eaque nobis veritatis
      praesentium!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
      perferendis modi, aut quaerat animi, a exercitationem vitae eius maiores
      dignissimos nemo voluptas dolore soluta vel, dicta eaque nobis veritatis
      praesentium!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
      perferendis modi, aut quaerat animi, a exercitationem vitae eius maiores
      dignissimos nemo voluptas dolore soluta vel, dicta eaque nobis veritatis
      praesentium!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
      perferendis modi, aut quaerat animi, a exercitationem vitae eius maiores
      dignissimos nemo voluptas dolore soluta vel, dicta eaque nobis veritatis
      praesentium!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
      perferendis modi, aut quaerat animi, a exercitationem vitae eius maiores
      dignissimos nemo voluptas dolore soluta vel, dicta eaque nobis veritatis
      praesentium!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
      perferendis modi, aut quaerat animi, a exercitationem vitae eius maiores
      dignissimos nemo voluptas dolore soluta vel, dicta eaque nobis veritatis
      praesentium!
    </p>
  </body>
</html>
